<template>
	<Echart
		id="leftCenter1"
		:options="options"
		class="left_center_inner"
		ref="echarts"
	/>
</template>

<script>
import { getgraph } from "@/api/modules/home.js";

export default {
	props: ["id"],
	data() {
		return {
			options: {},
			dataX: [],
			dataY1: [],
			dataY2: [],
		};
	},
	computed: {
		isCollapse() {
			return this.$store.state.isCollapse;
		},
	},
	watch: {
		isCollapse(oldVal, newVal) {
			if (oldVal !== newVal) {
				this.$refs.echarts.resize();
			}
		},
	},
	mounted() {
		this.getData();
	},

	beforeDestroy() {},
	methods: {
		getData() {
			getgraph({ devId: this.id, sampleName: "sum_soc" }).then((res) => {
				if (res.code == 200) {
					getgraph({ devId: this.id, sampleName: "current_power" }).then(
						(res1) => {
							if (res1.code == 200) {
								let xData = [];
								let ygList = [];
								let ygList1 = [];

								let data = res1.data;
								let data1 = res.data;
								for (let index = 0; index < data1.length; index++) {
									let element = data1[index];
									ygList1.push(
										element.graphHisDTO ? element.graphHisDTO.value : ""
									); //实时有效功率
								}
								for (let index = 0; index < data.length; index++) {
									let element = data[index];
									xData.push(element.date);
									ygList.push(
										element.graphHisDTO ? element.graphHisDTO.value : ""
									); //实时有效功率
									// wgList.push(element.pvPVal) //实时无效功率
									// maxygList.push()
									// maxwgList.push()
								}
								this.$nextTick(() => {
									this.init(xData, ygList, ygList1);
								});
							} else {
								this.$Message({
									text: res.msg,
									type: "warning",
								});
							}
						}
					);
				} else {
					this.$Message({
						text: res.msg,
						type: "warning",
					});
				}
			});
		},
		init(xData, yData, ygList1) {
			this.options = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: ["有功功率", "SOC"],
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				yAxis: [
					{
						name: "单位：MW",
						type: "value",
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					{
						name: "单位 %",
						type: "value",
						nameTextStyle: {
							color: "#fff",
							fontSize: 12,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
				],
				grid: {
					//布局
					show: true,
					left: "30px",
					right: "30px",
					bottom: "10px",
					top: "48px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
				},
				series: [
					{
						data: yData,
						type: "line",
						symbol: "none",
						itemStyle: {
							color: "#67c23a",
						},
						name: "有功功率",
					},
					{
						data: ygList1,
						type: "line",
						symbol: "none",
						yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
						itemStyle: {
							color: "#5083FF",
						},
						name: "SOC",
					},
				],
			};
		},
	},
};
</script>
<style lang="scss" scoped></style>
